﻿@using WikeSoft.Core
@{
    ViewBag.Title = "TreeGrid";
    Layout = "~/Views/Shared/_FrameLayout.cshtml";

}


@section styles{
    <link href="~/Content/css/jquery.treegrid.css" rel="stylesheet" />
}

@section scripts
{
    <script src="~/Scripts/jquery.treegrid.js"></script>
    <script src="~/Scripts/jquery.treegrid.extension.js"></script>


    <script type="text/javascript">

        function edit(Id, Department, Remark) {
            alert(Id);
            alert(Department);
            alert(Remark);
        }

        $(function () { 
            $('#tb').treegridData({
                id: 'Id',
                parentColumn: 'ParentId',
                type: "GET", //请求数据的ajax类型
                url: '/Department/GetData', //请求数据的ajax的url
                ajaxParams: {}, //请求数据的ajax的data属性
                treeColumn: 0, //在哪一列上面显示展开按钮
                striped: true, //是否各行渐变色
                bordered: true, //是否显示边框
                //expandAll: false,  //是否全部展开
                columns: [
                    {
                        title: '机构名称',
                        field: 'DepartmentName',
                        width: 'auto'
                    },
                    {
                        title: '机构描述',
                        field: 'Remark',
                        width: 'auto'
                    },
                    {
                        title: '操作',

                        html: '<input type="button" class="btn" value="编辑" onclick="edit(\'{Id}\',\'{DepartmentName}\',\'{Remark}\')" />'

                    }
                ]
            });

        });
    </script>
}

<div class="page-content">

    <table id="tb" class="table table-hover table-bordered">
        <colgroup>
            <col width="300px">
            <col width="auto">
            <col width="200px">
        </colgroup>
        <thead>
        <tr class="success">
            <td colspan="2" style="vertical-align: middle; text-align: center;">部门</td>
            <td colspan="2" rowspan="2" style="vertical-align: middle; text-align: center;">操作</td>
        </tr>
        <tr class="success">
            <td colspan="1" style="vertical-align: middle; text-align: center;">机构名称</td>
            <td colspan="1" style="vertical-align: middle; text-align: center;">机构描述</td>
        </tr>
        </thead>
    </table>

</div>

